<template>
  <el-card :style="{height: model.height.value}">
    <div slot="header">
      <span>{{ model.title.value }}</span>
      <el-button style="float: right; padding: 3px 0" type="text" @click="onClick">编辑
      </el-button>
    </div>
    <div class="link-body">
      <div class="link-body-context" v-for="(item,index) in list" :key="index">
        <div class="link-body-context-img">
          <el-button :icon="item.icon" style="font-size: 52px;" @click="onLinkClick(item)">
            <div class="link-body-context-title">
              {{ item.name }}
            </div>
          </el-button>
        </div>
      </div>
    </div>
    <sysLinkDrawer ref="sysLinkDrawer" @callBack="handleQuery"></sysLinkDrawer>
  </el-card>
</template>

<script>
import { getPage } from '@/api/sysLink'
import sysLinkDrawer from '@/setting/panel/components/drawer/sysLinkDrawer'

export default {
  components: { sysLinkDrawer },
  name: 'LinkPanel',
  props: ['model'],
  data() {
    return {
      list: []
    }
  },
  mounted() {
    this.handleQuery()
  },
  methods: {
    onClick() {
      this.$refs['sysLinkDrawer'].onShow()
    },
    handleQuery() {
      getPage({ 'pageSize': '100' }).then(res => {
        if (res.code === 20000 && res.data) {
          this.list = res.data.records
        }
      })
    },
    onLinkClick(item) {
      this.$router.push(item.url)
    }
  }
}
</script>

<style scoped>

.el-card__body {
  text-align: center;
}

.link-body {
  text-align: center;
}

.link-body-context {
  margin: 5px 5px;
}

.link-body-context-img,
.link-body-context {
  display: inline-block;
  margin-top: 5px;
}

.link-body-context-img {
  margin-top: 5px;
}

.link-body-context-title {
  text-align: center;
  font-weight: 500;
  padding-top: 2px;
  color: #333;
  font-size: 12px;
}
</style>
